<template>
  <div>新闻页</div>
  <p>store中的count: {{ count }}</p>
  <p>store中的getters 属性: {{ pentaCount }}</p>
  <p @click="addCount">count++ 同步方法</p>
  <p @click="addCountAsync">count++ 异步方法</p>
</template>

<script>
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  name: "",
  props: [""],
  setup() {
    // 获取stored对象
    const store = useStore();
    console.log(store);
    // 获取count
    // 注意:要以计算属性的形式接收state 的数据,否则修改不了,实现不了响应式
    let count = computed(() => {
      return store.state.count;
    });

    let pentaCount = computed(() => {
      return store.getters.pentaCount;
    });

    // 同步修改
    const addCount = () => {
      store.commit("add", 10);
    };

    // 异步修改
    const addCountAsync = () => {
      store.dispatch("addAsync", 5);
    };
    return {
      count,
      addCount,
      pentaCount,
      addCountAsync,
    };
  },
};
</script>
<style scoped>
</style>